﻿<ToggleButton x:Class="Wpf.Controls.MyToggleButton" x:Name="control"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
			  xmlns:local="clr-namespace:Wpf.Controls"
              mc:Ignorable="d" d:DesignHeight="22" Height="22"
			  Style="{DynamicResource ToggleButtonStyle}">
    
	<ToggleButton.Resources>
		<Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
		
		<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ToggleButton}">
						<ControlTemplate.Resources>
							<Storyboard x:Key="MoveLeft">
					            <local:GridLengthAnimation Storyboard.TargetName="colFirst" Storyboard.TargetProperty="Width"
									From="*" To="0" Duration="0:0:0.25" />
					            <local:GridLengthAnimation Storyboard.TargetName="colLast" Storyboard.TargetProperty="Width"
									From="0" To="*" Duration="0:0:0.25" />
					        </Storyboard>
					        <Storyboard x:Key="MoveRight">
					            <local:GridLengthAnimation Storyboard.TargetName="colFirst" Storyboard.TargetProperty="Width"
									From="0" To="*" Duration="0:0:0.25" />
					            <local:GridLengthAnimation Storyboard.TargetName="colLast" Storyboard.TargetProperty="Width"
									From="*" To="0" Duration="0:0:0.25" />
					        </Storyboard>
						</ControlTemplate.Resources>
						
						<Border CornerRadius="3" BorderBrush="#FFD2D1D6" BorderThickness="0.5" Margin="0.5">
							<Border.Background>
								<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
									<GradientStop Color="#FFFCFEF9" Offset="1"/>
									<GradientStop Color="#FFCFCFCD" Offset="0"/>
								</LinearGradientBrush>
							</Border.Background>

							<Grid>

								<Grid.ColumnDefinitions>
									<ColumnDefinition x:Name="colFirst" Width="*" />
									<ColumnDefinition Width="14" />
									<ColumnDefinition Width="14" />
									<ColumnDefinition x:Name="colLast" Width="0" />
								</Grid.ColumnDefinitions>

								<Border Grid.Column="0" CornerRadius="3,0,0,3" BorderBrush="#FFD2D1D6" BorderThickness="0.5" Margin="-0.5,-0.5,-2,-0.5">
									<Border.Background>
										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
											<GradientStop Color="#FF3573EA" Offset="0"/>
											<GradientStop Color="#FF3E85FB" Offset="0.5"/>
											<GradientStop Color="#FF5191F2" Offset="0.5"/>
											<GradientStop Color="#FF7BB3FF" Offset="1"/>
										</LinearGradientBrush>
									</Border.Background>

                                    <TextBlock Text="{Binding Path=Left, ElementName=control}" Foreground="White" Margin="10,0,10.5,0" />
								</Border>

								<Border Grid.Column="3">
                                    <TextBlock Text="{Binding Path=Right, ElementName=control}" Foreground="Black" Margin="10,0,10,0" />
								</Border>

								<Border Grid.Column="1" Grid.ColumnSpan="2" CornerRadius="3" BorderBrush="#FF929292" BorderThickness="0.5,0.5,0.5,0.5" Margin="-1">
									<Border.Background>
										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
											<GradientStop Color="#FFFCFBFB" Offset="0"/>
											<GradientStop Color="#FFD6D5D5" Offset="1"/>
										</LinearGradientBrush>
									</Border.Background>

									<Border CornerRadius="3" BorderBrush="#FFFFFFFF" BorderThickness="0.5,0.5,0.5,0.5" />
								</Border>
							</Grid>
						</Border>
							
						<ControlTemplate.Triggers>
							<Trigger Property="IsChecked" Value="true">
								<Trigger.EnterActions>
									<BeginStoryboard Storyboard="{StaticResource MoveLeft}"/>
								</Trigger.EnterActions>
								<Trigger.ExitActions>
									<BeginStoryboard Storyboard="{StaticResource MoveRight}"/>
								</Trigger.ExitActions>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</ToggleButton.Resources>
    
</ToggleButton>